<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG</title>

  <style>
    svg {
      border: 1px solid red;
    }
  </style>
</head>
<body>
  
  <svg width="500" height="500" >

    <!-- 矩形、圆、椭圆、线 -->
    <rect x="0" y="0" width="100" height="100" fill="red" rx="20"></rect>
    <circle cx="150" cy="50" r="30" fill="green"></circle>
    <ellipse cx="250" cy="50" rx="30" ry="50" fill="skyblue"></ellipse>
    <line x1="300" y1="50" x2="350" y2="50" stroke="blue"></line>

    <!-- 折线、多边形 -->
    <polyline points="350 100,400 100, 400 0" fill="transparent" stroke="pink"></polyline>
    <polygon points="420 100,470 100, 450 0" fill="transparent" stroke="pink"></polygon>

    <!-- 路径 -->
    <path d="M 10 200, 50 200, 50 120 Z" stroke="blue" fill="transparent"></path>

    <!-- 图片、文字 -->
    <image xlink:href="../images/notice.jpg" x="100" y="120" height="80"></image>
    <text x="200" y="180" fill="red" font-weight="bold" fill-opacity="0.5">鼠标手势</text>
  </svg>

</body>
</html>